import { userState } from "@/store/user/types"
import { Button, Select, Spin, Tree, TreeDataNode, TreeProps } from "antd"
import React, { useEffect, useState } from "react"
import { useSelector } from "react-redux"
import Addclassification from "./addclassification"
import { PropsTypes, classFicationThree } from "./types"
import { cloneDeep } from "lodash"
import { getList } from "@/api/addclassification"
import { DownOutlined } from "@ant-design/icons"

let timer: any = null
const Classification: React.FC<PropsTypes> = () => {
    const { shopsOptions } = useSelector((state: { user: userState }) => ({
        shopsOptions: state.user.shopsOptions,
    }))
    const [show, setShow] = useState(false)
    const [loading, setLoading] = useState(false)
    const [parentUuid, setParentUuid] = useState("")

    const defaultValue = shopsOptions[0].uuid || ""
    const [currentShops, setCurrentShops] = useState(defaultValue)
    const [data, setData] = useState<classFicationThree>(
        {
            uuid: "",
            parentUuid: "",
            shop: "",        // 关联店铺
            name: "",     // 名称
            picture: "",  // 图片
            notes: "",     // 介绍
            order: 0,       // 排序
            childUuids: [],
            childs: [],
        }
    )
    const cloneData = cloneDeep(data)
    const [treeData, setTreeData] = useState<TreeDataNode[]>([])
    useEffect(() => {
        find()
    }, [])
    const find = () => {
        clearTimeout(timer)
        timer = setTimeout(() => {
            setLoading(true)
            const d = {
                shopUuid: currentShops
            }
            getList<classFicationThree[]>(d).then((e) => {
                // console.log(e)
                setTreeData(initTree(e))
                console.log(treeData)
            }).finally(() => {
                setLoading(false)
            })
        }, 500);
    }
    const initTree = (data: classFicationThree[]) => {
        const list: TreeDataNode[] = []
        for (let index = 0; index < data.length; index++) {
            const ele = data[index];
            const l: TreeDataNode = {
                key: ele.uuid,
                title: ele.name,
                checkable: false,
                ...ele,
                children: []
            }
            if (ele.childs && ele.childs.length > 0) {
                const newList = initTree(ele.childs)
                l.children?.push(...newList)
            }
            list.push(l)

        }
        return list
    }
    const addTree = () => {
        setShow(true)
        setData(cloneData)
    }
    const handleChange = (e: any) => {
        setCurrentShops(e)
    }
    const changemodel = (v: boolean) => {
        setShow(v)
        setData(cloneData)
        setParentUuid("")
    }
    const onSelect: TreeProps['onSelect'] = () => {
        // console.log('selected', selectedKeys, info)
    }
    const onCheck: TreeProps['onCheck'] = (checkedKeys, info) => {
        console.log('onCheck', checkedKeys, info);
    };
    const handeltitleRender = (e: any) => {
        return (
            <div>
                <span>{e.name}</span>
                <Button type="link" onClick={() => modiufind(e)}>修改分类</Button>
                <Button type="link" onClick={() => addchilde(e)}>添加子集</Button>
            </div>
        )
    }
    const addchilde = (e: any) => {
        setParentUuid(e.uuid)
        setShow(true)
        setData(cloneData)
    }
    const modiufind = (e: any) => {
        console.log(e)
    }
    return (
        <div>
            <div>
                <Select
                    defaultValue={defaultValue}
                    style={{ width: 120 }}
                    onChange={handleChange}
                    fieldNames={{ label: "shopName", value: "uuid" }}
                    options={shopsOptions}
                />
                <Button type="primary" onClick={() => { addTree() }}>添加父级分类</Button>
                <Addclassification
                    show={show}
                    change={(e) => { changemodel(e) }}
                    data={data}
                    shop={currentShops}
                    ParentUuid={parentUuid} />
            </div>
            <Spin spinning={loading}>
                <Tree
                    checkable
                    //   defaultExpandedKeys={['0-0-0', '0-0-1']}
                    //   defaultSelectedKeys={['0-0-0', '0-0-1']}
                    //   defaultCheckedKeys={['0-0-0', '0-0-1']}
                    switcherIcon={<DownOutlined />}
                    defaultExpandAll
                    onSelect={onSelect}
                    onCheck={onCheck}
                    treeData={treeData}
                    titleRender={(e) => handeltitleRender(e)}
                />
            </Spin>

        </div>
    )
}
export default Classification